# Requester

### Описание

Пример расширения **API chrome.devtools.network** с обработкой запросов и ответов в инструментах разработчика.
В расширении часть данных отображается на вкладке в инструментах разработчика,
а часть пересылается на страницу опций.
Тела ответа в примере не используются, но возможность их получения сохранена.
**API chrome.devtools.network** позволяет просмотреть все запросы, проходящие от открытой веб-страницы.
Каждая запись, получаемая в еденичной записи **chrome.devtools.network.onRequestFinished** равна одной _entry_ из 
HAR-архива.

### Технологии

* JavaScript
* Chrome API
* Chrome DevTools

### Установка

1. Загрузить zip-архив репозитория или клонировать репозиторий
2. Распаковать архив
3. Открыть браузер Google Chrome и перейти в настройки расширений путем открытия в строке ввода url:

```
chrome://extensions/
```

4. В верхней правой части экрана включить радиобаттон: 'Режим разработчика'
5. В верхней левой части экрана нажать кнопку 'Загрузить распакованное расширение' и указать путь к папке '/extension'
   из п.2

### Описание работы

Для демонстрации работы расширения необходимо:

- установить расширение;
- открыть инструменты разработчика и перейти на вкладку 'Requester';
- нажать на значок расширения в верхней панели и открыть страницу опций;
- на вкладке 'Requester' включить чек-бокс 'Отправить статистику в модуль опций'
- перезагрузить страницу;

В итоге на вкладке 'Requester' в инструментах разработчика будет отображена статистика по запросам,
а на странице опций статистика по URL.
На страницу опций данные пересылаются из инструментов разработчика.

В файле 'ApiModelData.json' содержится модель данных, получаемая от метода 'chrome.devtools.network.onRequestFinished'.

### Схемы взаимодействия компонентов расширения

<details>
  <summary markdown="span">Диаграмма пересылки сообщений между компонентами расширения Requester</summary>
  ![Схема 1](/other/images/sequense_schema.svg)
</details>

<details>
  <summary markdown="span">Схема пересылки сообщений между компонентами расширения Requester</summary>
  ![Схема 2](/other/images/component_schema.svg)
</details>

### Дополнительно

Пример получения тела ответа с параметром 'mimeType'
```
function handleRequestFinished(request) {
	console.log("Server IP: ", request.serverIPAddress);
	request.getContent().then(([content, mimeType]) => {
		console.log("Content: ", content);
		console.log("MIME type: ", mimeType);
	});
}
browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);
```